<template>
  <div class="pic">
    <div style="height: auto; margin: 0 auto; padding: 20px">
      <div
        style="
          font-size: 28px;
          line-height: 3;
          font-family: Helvetica Neue;
          text-align: center;
          color: #ffff37;
        "
      >
        授权绑定(教师)
      </div>
      <el-form
        :label-position="right"
        label-width="0"
        :model="form"
        ref="form"
        :rules="rules"
      >
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="登录账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            placeholder="密码"
            type="password"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="submitForm" style="width: 100%"
        >提 交 绑 定</el-button
      >

      <div style="line-height: 2; font-family: Helvetica Neue">
        <div v-if="msg == null && tip == null && advice == null">
          <span style="color: red; margin-right: 3px">*说明:</span>
          <span style="color: darkgrey; margin-right: 3px"
            >请输入慧教通平台的登录账号和密码进行授权</span
          >
        </div>
        <div v-if="msg != null">
          <span style="color: red; margin-right: 3px">*提示:</span>
          <span style="color: darkgrey; margin-right: 3px">{{ msg }}</span>
        </div>
        <div v-if="tip != null">
          <span style="color: red; margin-right: 3px">*提示:</span>
          <span style="color: darkgrey; margin-right: 3px"
            >{{ tip }}
            <a href="https://zhxypt.net/wechat/teacher/code"
              >https://zhxypt.net/wechat/teacher/code</a
            ></span
          >
        </div>
        <div v-if="advice != null">
          <span style="color: red; margin-right: 3px">*提示:</span>
          <span style="color: darkgrey; margin-right: 3px">{{ advice }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import {
  getWechatOfficialOpenId,
  saveTeacherOfficialOpenId,
} from "@/api/wechat/wechat.js";

export default {
  data() {
    return {
      code: null,
      msg: null,
      tip: null,
      advice: null,
      form: {
        username: "",
        password: "",
        openId: "",
      },
      rules: {
        username: [{ required: true, message: "必填", trigger: "blur" }],
        password: [{ required: true, message: "必填", trigger: "blur" }],
      },
    };
  },

  mounted() {
    this.code = new URLSearchParams(window.location.search).get("code");
    this.getOpenId();
  },
  methods: {
    getOpenId() {
      if (this.code) {
        let obj = { code: this.code };
        getWechatOfficialOpenId(obj).then((resp) => {
          this.form.openId = resp.data;
        });
      }
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          saveTeacherOfficialOpenId(this.form).then((resp) => {
            this.msg = null;
            this.tip = null;
            if (resp.code == 200) {
              if (resp.data == 1) {
                this.$message({ message: "绑定成功", type: "success" });
              } else if (resp.data == -1) {
                this.msg = "当前用户不存在！！！";
              } else if (resp.data == -2) {
                this.tip = "参数丢失，请点击链接重新获取参数，";
              } else if (resp.data == -3) {
                this.advice = "密码错误，请输入重新输入密码！！！";
              }
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss"  scoped>
.pic {
  background-image: url("~@/assets/bg-m.jpg");
  height: 100%;
  width: auto;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>